<template>

    <el-row class="row-bg" justify="end">
        <a href="#/main/brand/create" >
            <el-button type="primary">
                创建
            </el-button>
        </a>
    </el-row>

    <div class="search-bar">

        <el-form :inline="true" :model="search" @submit.prevent >            

            <el-form-item label="名称" style=" margin-bottom:0">
                <el-input v-model="search.name" placeholder="分类名称" 
                @keyup.enter="do_search"/>
            </el-form-item>

            <el-form-item style=" margin-bottom:0">
                <el-button type="primary" @click="do_search">搜索</el-button>
            </el-form-item>
        </el-form> 

    </div>

    <el-table
        :data="brandList"
        highlight-current-row
        @current-change=""
        style="width: 100%">
        <el-table-column
            property="name"
            label="品牌名称"
            width="">
        </el-table-column>
        <el-table-column
            property="img"
            label="图片"
            width="">
            <template #default="scope">
                <img :src="(VITE_URL + '/storage/' + scope.row.img)" alt="" >
            </template>    
        </el-table-column>
        <el-table-column
            property="letter_pre"
            label="字母排序"
            width="">
        </el-table-column>
        <el-table-column
            property="status"
            label="状态"
            width="">

            <template #default="scope">
                <span v-show="scope.row.status==1" style="color:green">启用</span>
                <span v-show="(scope.row.status==0)"  style="color:red">禁用</span>
            </template>
        </el-table-column>
        <el-table-column
            property=""
            label="编辑"
            width="">

            <template #default="scope">
                <el-button link type="primary" size="small"
                @click.prevent="deletebrand(scope.row.id)" >
                    删除
                </el-button>
                <a :href=" '/main/brand/edit/' + scope.row.id">编辑</a>
            </template>
        </el-table-column>

    </el-table>

    <div class=" table-below ">
        
        <el-pagination
            @current-change="changePage"
            :page-size="per_page"
            layout="prev, pager, next" :total="total" />
    </div>
    
</template>

<script setup lang="ts" >

import axios from 'axios';
import { ref } from 'vue';
const VITE_URL = window.VITE_URL;
const search:any = ref<object>({
    name:''
})

const brandList:any = ref<object>()
const per_page:any = ref<number>(10);
const total:any = ref<number>();
const changePage:any = ref<number>(1);

const do_search = () => {

    getList();
}

const getList = () => {

    const url = VITE_URL + '/admin.brand/index';
    let data = {
        name        : search.value.name
    };
    // console.log(url,data)
    axios.post( url, data ).then( res => {

        console.log( res );
        
        brandList.value = res.data;

    });
}
getList();

// 编辑分类
const deletebrand = ( id:any ) => {

    const url = VITE_URL + '/admin.brand/remove';
    let data = {
        id        : id
    };
    // console.log(url,data)
    axios.post( url, data ).then( res => {

        console.log( res );
        
        brandList.value = res.data;

    });

}
    
</script>
